<!--
 * @Author: Terry
 * @Date: 2024-10-25 23:44:04
 * @LastEditors: Terry
 * @LastEditTime: 2024-10-25 23:44:33
 * @Description: file content
 * @FilePath: \auxface_web\src\views\BI\confinedSpace\modules\trend.vue
-->
<template>
    <div>
      <LineChart ref="lineChart" :seriesData="lineChartData" :option="lineChartOption" :height="height"/>
        <!-- <el-radio-group v-model="date" size="small" class="bg_radio" @change="searchQuery"> -->
            <!-- <el-radio-button label="day">近一日</el-radio-button> -->
            <!-- <el-radio-button label="week">近一周</el-radio-button> -->
            <!-- <el-radio-button label="month">近一月</el-radio-button> -->
        <!-- </el-radio-group> -->
    </div>
</template>
<script>
import LineChart from '@/components/Chart/LineChart'
import visual from './visual'
export default {
  name: 'trend',
  mixins: [visual],
  props: {
      dataSource: {
          type: Object,
          default: () => {}
      }
  },
  components: {
    LineChart
  },
  data () {
    return {
        date:'day',
        height:'30vh'
    }
  },
  watch:{
    'dataSource':function (data) {
        let O2 = []
        let CH4 = []
        let CO = []
        let H2S = []
        data.data.forEach(item=>{
            O2.push(item.O2)
            CH4.push(item.CH4)
            CO.push(item.CO)
            H2S.push(item.H2S)
        })
        this.$set(this.lineChartData[0],'data',CH4)
        this.$set(this.lineChartData[1],'data',H2S)
        this.$set(this.lineChartData[2],'data',CO)
        this.$set(this.lineChartData[3],'data',O2)
        this.lineChartOption.xAxis.data = data.field
        this.$refs.lineChart.init()
    }
  },
  methods: {
    searchQuery () {
        
    }
  }
}
</script>
<style lang="scss" scoped>
.bg_radio {
    display: flex;
    .el-radio-button--small {
        text-align: center;
        margin-right: 15px;
    }
    :deep(.el-radio-button__inner) {
        font-size: 0.73vw;
        padding: 4px 12px;
        border: none !important;
        border-radius: 3px;
        background: rgba(33, 98, 164, 0.2);
        box-shadow: none;
        color: #000;
    }
    .is-active {
        background: #2162A4;
        :deep(.el-radio-button__inner){
            color: #fff;
        }
    }
}
</style>